<template>
  <div class="layOut">
   <app-header></app-header>
   <app-leftNav></app-leftNav>
   <app-main></app-main>
  </div>
</template>

<script>
import AppHeader from '@/components/AppHeader';
import AppLeftNav from '@/components/AppLeftNav';
import AppMain from '@/components/AppMain';
export default {
  components:{
    AppHeader,
    AppLeftNav,
    AppMain
  }
}
</script>

<style scoped>
  .header{
    height: 50px;
    width: 100%;
    background-color: #2d3a4b;
    line-height: 50px;
    position: absolute;
    top:0;
    left:0;
  }
  .leftNav{
    width: 230px;
    position: absolute;
    top:50px;
    bottom:0;
    left:0;
    /* 当显示内容的区域缩小 会自动出现滚动条 */
    overflow-y:auto;
    background-color: #545c64;
  }
  .main{
    position: absolute;
    top:50px;
    left:230px;
    right:0;
    bottom:0;
    background-color:#fff;
  }

</style>